<template>
  <div>
      {{ 1 | myfilter}}

      {{reverse_msg}}
      <button @click="counter++">点我</button>
      {{counter}}


        <div>
            <ul>
                <li v-for="(item,index) in tlist" :key="index" :class="{on:index%2==0,off:index%2!=0}" >
                    {{item.text}}
                    {{index}}
                </li>
            </ul>
        </div>

        {{msg}}

        <div v-html="msg"></div>

        <h1 v-show="ok">显示</h1>

        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else>
            C
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            msg:'你好哈哈',
            ok:true,
            type:'A',
            tlist:[{text:'汽车'},{text:'鲜花'}],
            counter:0
        }
    },
    //监听属性
    watch:{
        counter:function(nval,oval){
            console.log('计数器的变化:'+nval+'变成了'+oval);
        }

    },
    //过滤器
    filters:{
        myfilter:function(value){
            if(value==1){
                return "已支付";
            }else{
                return '未支付'
            }
        }
    },
    //计算属性
    computed:{
        reverse_msg:function(){
            return this.msg.split('').reverse().join('')
        }
    }

}
</script>

<style>
.on{background-color: blue;}
.off{background-color: cadetblue;}
</style>